log("resizer.js loaded");
/**Makes a box moveable/ resizable by dragging moveHandle/ resizeHandle*/
(function() {
    var layer = null,
        lastPos = {x: 0, y: 0},
        moved = {x: 0, y: 0},
        size = {w: 0, h: 0},
        box$;
    const MIN_SIZE = {w: 550, h: 250};
    function initLayer(){
        if(layer)
            return;
        var box = box$.get(0);
        layer = $('<div id="clicknlearn-resize-layer"></div>').css({
            top: (parseInt(box.style.top) + 10) + 'px',
            left: (parseInt(box.style.left) + 10) + 'px',
            width: box.style.width,
            height: box.style.height
        }).get(0);
    }
    //~~~~~~public methods~~~~~~//
    var Resizer = function(){};
    Resizer.makeMovableAndResizable = function(box, moveHandle, resizeHandle, other){
        box$ = $(box);
        function moveListener(e) {
            moved.x = e.clientX - lastPos.x - document.body.scrollLeft;
            moved.y = e.clientY - lastPos.y - document.body.scrollTop;
            lastPos.x = e.clientX;
            lastPos.y = e.clientY;
            box.style.top = moveHandle.style.top = other.style.top = (box.offsetTop + moved.y) + 'px';
            box.style.left = moveHandle.style.left = other.style.left = (box.offsetLeft + moved.x) + 'px';
            resizeHandle.style.top = (box.offsetTop + moved.y + size.h - 16) + 'px';
            resizeHandle.style.left = (box.offsetLeft + moved.x + size.w - 16) + 'px';
            e.preventDefault();
        }
        function moveHandleDownListener(e){
            lastPos = {x: e.clientX, y: e.clientY};
            size = {w: box$.outerWidth(), h: box$.outerHeight()};
            window.addEventListener('mousemove', moveListener, false);
            window.addEventListener('mouseup', moveHandleUpListener, false);
            e.preventDefault();
        }
        function moveHandleUpListener(e){
            window.removeEventListener('mouseup', moveHandleUpListener, false);
            window.removeEventListener('mousemove', moveListener, false);
            e.preventDefault();
        }
        function resizeListener(e) {
            moved.x = e.clientX - lastPos.x;
            moved.y = e.clientY - lastPos.y;
            var height = box$.height() + moved.y, width = box$.width() + moved.x;
            if (height >= MIN_SIZE.h){
                box.style.height = layer.style.height = height + 'px';
                resizeHandle.style.top = (box.offsetTop + height + size.h - 16) + 'px';
                lastPos.y = e.clientY;
            }
            if (width >= MIN_SIZE.w){
                box.style.width = layer.style.width = width + 'px';
                resizeHandle.style.left = (box.offsetLeft + width + size.w - 16) + 'px';
                lastPos.x = e.clientX;
            }
            e.preventDefault();
        }
        function resizeHandleDownListener(e){
            lastPos = {x: e.clientX, y: e.clientY};
            size = {w: box$.outerWidth() - box$.width(), h: box$.outerHeight() - box$.height()};
            initLayer();
            box.parentNode.appendChild(layer);
            window.addEventListener('mousemove', resizeListener, false);
            window.addEventListener('mouseup', resizeHandleUpListener, false);
            e.preventDefault();
        }
        function resizeHandleUpListener(e){
            window.removeEventListener('mouseup', resizeHandleUpListener, false);
            window.removeEventListener('mousemove', resizeListener, false);
            try { box.parentNode.removeChild(layer);} catch (e) {}
            e.preventDefault();
        }
        moveHandle.addEventListener('mousedown', moveHandleDownListener, false);
        resizeHandle.addEventListener('mousedown', resizeHandleDownListener, false);
    };
    window.Resizer = Resizer;
})();